<script setup>
//导入axios (npm instal axios)
import { UserGetAllService, UserGetByIdService, UserGetByGenderService, UserDropByIdService } from "@/api/user.js";//@代表src目录
import { ref, onMounted } from 'vue'
const users = ref([])
// 搜索条件
const search = ref({
    id: '',
    gender: ''
})
// 根据id查询
const searchid = async function () {
    users.value = [await UserGetByIdService(search.value.id)]
}
// 根据性别查询
// params:{...search.value}
const searchgender = async function () {
    users.value = await UserGetByGenderService(search.value.gender)
}
// 删除
const deleteid = async function (id) {
    if(UserDropByIdService(id)){
        users.value = await UserGetAllService()
    }
}
// 重置
const clear = async function () {
    users.value = await UserGetAllService()
    search.value.id = ''
    search.value.gender = ''
}
onMounted(() => {
    const searchAll = async function () {
        users.value = await UserGetAllService()
    }
    searchAll()
})
</script>
<template>
    <div id="search">
        <p>
            编号：<input type="text" v-model="search.id" /><button @click="searchid">搜索</button>
            性别：<input type="text" v-model="search.gender" /><button @click="searchgender">搜索</button>
        </p>
        <button @click="clear">重置</button>
    </div>
    <table border="1" colspa="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.gender }}</td>
            <td>{{ user.phone }}</td>
            <td>
                <button @click="deleteid(user.id)">删除</button>
            </td>
        </tr>
    </table>
</template>